<!-- src/components/WordBook.vue -->
<template>
  <div class="word-book-root">
    <el-card
      :style="{ backgroundColor: randomColor, width: '100px', height: '160px' }"
      class="word-book"
      @click="handleClick"
    >
      <div class="word-book-title">{{ title }}</div>
    </el-card>
    <div class="word-book-info">
      <div v-show="wordCount != '' && wordCount != null">{{ wordCount }}词</div>
      <div v-show="author != '' && author != null">{{ author }}上传</div>
      <div v-show="createDate != '' && createDate != null">
        {{ shortenDate }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";

const emit = defineEmits(["bookClick"]);
const handleClick = () => {
  emit("bookClick");
};

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  wordCount: {
    type: Number,
    required: false,
  },
  author: {
    type: String,
    required: false,
  },
  createDate: {
    type: String,
    required: false,
  },
});

const randomColor = computed(() => {
  const colors = ["#f5f5f5", "#e0f7fa", "#fce4ec", "#e8f5e9", "#fff3e0"];
  return colors[Math.floor(Math.random() * colors.length)];
});

const shortenDate = computed(() => {
  const date = new Date(props.createDate);
  // 提取UTC年份的后两位
  const year = date.getUTCFullYear().toString().slice(-2);
  // 提取UTC月份并补零（月份从0开始，需+1）
  const month = (date.getUTCMonth() + 1).toString().padStart(2, "0");
  // 提取UTC日期并补零
  const day = date.getUTCDate().toString().padStart(2, "0");
  // 组合成目标格式
  return `${year}-${month}-${day}`;
});
</script>

<style scoped>
.word-book-root {
  display: flex;
  flex-direction: column;
  align-items: left;
}
.word-book {
  margin: 10px;
  text-align: center;
  margin-bottom: 0px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.word-book:hover {
  transform: scale(1.1);
  filter: brightness(0.9);
}
.word-book-title {
  font-size: 18px;
  font-weight: bold;
}
.word-book-info {
  font-size: 12px;
  margin-bottom: 10px;
  margin-left: 10px;
}
</style>
